<template>
  <view class="resource-card" :class="colorClasses">
    <view class="card-header">
      <view class="icon-container" :class="iconContainerClass">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="file-icon">
          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
          <line x1="16" x2="8" y1="13" y2="13"></line>
          <line x1="16" x2="8" y1="17" y2="17"></line>
          <line x1="10" x2="8" y1="9" y2="9"></line>
        </svg>
      </view>
      <view class="download-button" :class="iconColorClass">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="7 10 12 15 17 10"></polyline>
          <line x1="12" x2="12" y1="15" y2="3"></line>
        </svg>
      </view>
    </view>

    <text class="title">{{ title }}</text>

    <view class="footer">
      <view class="type-badge">{{ resourceType }}</view>
      <view class="stats">
        <text>{{ downloads }}次下载</text>
        <text class="separator">|</text>
        <text>{{ size }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  resourceType: {
    type: String,
    required: true
  },
  downloads: {
    type: Number,
    required: true
  },
  size: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'blue',
    validator: (value) => ['blue', 'emerald', 'amber', 'rose'].includes(value)
  }
});

const colorClasses = computed(() => {
  const colorMap = {
    blue: 'bg-blue-50 text-blue-700 border-blue-100',
    emerald: 'bg-emerald-50 text-emerald-700 border-emerald-100',
    amber: 'bg-amber-50 text-amber-700 border-amber-100',
    rose: 'bg-rose-50 text-rose-700 border-rose-100'
  };
  return colorMap[props.color];
});

const iconContainerClass = computed(() => {
  const colorMap = {
    blue: 'bg-blue-100',
    emerald: 'bg-emerald-100',
    amber: 'bg-amber-100',
    rose: 'bg-rose-100'
  };
  return colorMap[props.color];
});

const iconColorClass = computed(() => {
  const colorMap = {
    blue: 'text-blue-500',
    emerald: 'text-emerald-500',
    amber: 'text-amber-500',
    rose: 'text-rose-500'
  };
  return colorMap[props.color];
});
</script>

<style scoped>
.resource-card {
  border-radius: 12px;
  border-width: 1px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s;
}

.resource-card:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.bg-blue-50 {
  background-color: #eff6ff;
}

.text-blue-700 {
  color: #1d4ed8;
}

.border-blue-100 {
  border-color: #dbeafe;
}

.bg-emerald-50 {
  background-color: #ecfdf5;
}

.text-emerald-700 {
  color: #047857;
}

.border-emerald-100 {
  border-color: #d1fae5;
}

.bg-amber-50 {
  background-color: #fffbeb;
}

.text-amber-700 {
  color: #b45309;
}

.border-amber-100 {
  border-color: #fef3c7;
}

.bg-rose-50 {
  background-color: #fff1f2;
}

.text-rose-700 {
  color: #be123c;
}

.border-rose-100 {
  border-color: #ffe4e6;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.bg-blue-100 {
  background-color: #dbeafe;
}

.bg-emerald-100 {
  background-color: #d1fae5;
}

.bg-amber-100 {
  background-color: #fef3c7;
}

.bg-rose-100 {
  background-color: #ffe4e6;
}

.file-icon {
  color: currentColor;
}

.download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.text-blue-500 {
  color: #3b82f6;
}

.text-emerald-500 {
  color: #10b981;
}

.text-amber-500 {
  color: #f59e0b;
}

.text-rose-500 {
  color: #f43f5e;
}

.title {
  font-size: 14px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 12px;
}

.type-badge {
  padding: 2px 8px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.separator {
  color: rgba(0, 0, 0, 0.2);
}
</style>